/* eslint-disable max-len */
import React from 'react';
import { Tabs, Radio, Form } from 'antd';
import Container from 'components/Container';
import Button from 'components/BtnComponent';
import Input from 'components/Input';

import renderOptionInput from './Input';

const { TabPane } = Tabs;
const renderInput = (inputs, id) => {
  // const basic = [
  //   {
  //     name: '活动列表',
  //     // labelRequired: true,
  //     formInputName: 'name',
  //     isSelect: true,
  //     options: [
  //       {
  //         id: 'string',
  //         name: 'string',
  //       },
  //     ],
  //   },
  // ];
  const basic = inputs ? inputs.map(item => ({ name: item, formInputName: `input_${item}`, placeholder: item })) : [];
  return (
    <Container>
      {basic.map(item => renderOptionInput(item, `${id}${item.formInputName}`))}
    </Container>
  );
};

const renderOutput = (outputs) => {
  const basic = outputs ? outputs.map(item => ({ name: item, formInputName: `output_${item}` })) : [];
  return (
    <Container>
      {basic.map(item => (
        <Container key={item} style={{ marginBottom: 12, padding: '0 16px', color: '#E7EFFF' }}>
          {`${item.name}：${item.name}`}
        </Container>
      ))}
    </Container>
  );
};

const renderConfig = (id, formRef) => {
  // const controlList = [
  //   {
  //     name: '遍历集合',
  //     formInputName: 'obj',
  //   },
  //   {
  //     name: '遍历元素变量',
  //     formInputName: 'item',
  //   },
  //   // {
  //   //   name: '循环结束条件',
  //   //   formInputName: 'ip',
  //   // },
  // ];
  console.log();

  return (
    <Container style={{ marginBottom: '12px' }}>
      <Container>
        <span style={{ fontSize: '13px', marginLeft: '16px', color: '#E7EFFF' }}>
          失效时处理
        </span>
        <Form.Item name={`${id}errorStop`}>
          <Radio.Group style={{ padding: '0 12px' }}>
            <Radio value={0}>终止执行剧本</Radio>
            <Radio value={1}>继续执行剧本</Radio>
          </Radio.Group>
        </Form.Item>
      </Container>
      <Container>
        <span style={{ fontSize: '13px', marginLeft: '16px', color: '#E7EFFF' }}>
          等待完成节点数
        </span>
        <Container flex justify="space-between" style={{ paddingRight: '12px' }}>
          <Input
            name={`${id}join`}
          />
          <Button onClick={() => { formRef.current.setFieldsValue({ [`${id}join`]: 'all' }); }}>全部</Button>
        </Container>
      </Container>
      {/* <Container style={{ padding: '0 12px' }}>
        <span style={{ fontSize: '13px', color: '#E7EFFF' }}>
          循环控制
        </span>
        <Container style={{
          background: '#181C25',
          padding: '12px 0',
        }}
        >
          <span style={{ fontSize: '13px', margin: '0 16px', color: '#E7EFFF' }}>
            是否启用
          </span>
          <Radio.Group defaultValue={0}>
            <Radio value={0}>是</Radio>
            <Radio value={1}>否</Radio>
          </Radio.Group>
          {controlList.map(item => renderOptionInput(item, `${id}${item.formInputName}`))}
        </Container>
      </Container> */}
    </Container>
  );
};

const AppAction = ({
  id,
  tasks,
  type,
  appList,
  formRef,
  submit,
  onClose,
}) => {
  const [instances, setInstances] = React.useState([]);
  const [commandsInfo, setCommandsInfo] = React.useState([]);
  const [inputs, setInputs] = React.useState([]);
  const [outputs, setOutputs] = React.useState([]);

  React.useEffect(() => {
    const task = tasks.find(item => item.uuid === id);
    if (task) {
      const {
        nick,
        description,
        app,
        actionName,
        using,
        errorStop,
        join,
        input,
      } = task;

      Object.keys(input).forEach((key) => {
        formRef.current.setFieldsValue({
          [`${id}input_${key}`]: input[key],
        });
      });

      formRef.current.setFieldsValue({
        [`${id}nick`]: nick,
        [`${id}description`]: description,
        [`${id}app`]: app,
        [`${id}action`]: actionName,
        [`${id}using`]: using,
        [`${id}errorStop`]: errorStop,
        [`${id}join`]: join,
      });
    }

    const res = formRef.current.getFieldValue();
    if (res[`${id}app`] && appList) { // 此节点已选择app
      const app = appList.find(item => item.id === res[`${id}app`]);
      if (app) {
        setInstances(app.instances);
        setCommandsInfo(app.script.commands);
      }
      if (app && res[`${id}action`]) { // 此节点已选择action
        const commandInfo = app.script.commands.find(item => item.name === res[`${id}action`]);
        if (commandInfo) {
          setInputs(commandInfo.input.propertyOrder);
          setOutputs(commandInfo.output.propertyOrder);
        }
      }
    } else {
      setInstances([]);
      setCommandsInfo([]);
      setInputs([]);
      setOutputs([]);
    }

    if (!res[`${id}errorStop`]) {
      formRef.current.setFieldsValue({
        [`${id}errorStop`]: 0,
      });
    }
    // });
  }, [id]);

  const appAction = [
    {
      name: '节点名称',
      labelRequired: true,
      formInputName: 'nick',
    },
    // {
    //   name: '节点ID',
    //   labelRequired: true,
    //   formInputName: 'id',
    // },
    {
      name: '节点描述',
      formInputName: 'description',
    },
    {
      name: 'APP',
      formInputName: 'app',
      isSelect: true,
      options: appList ? appList.map(item => ({ id: item.id, name: item.display })) : [],
      onChange: (appid) => {
        const app = appList.find(item => item.id === appid);
        if (app) {
          setInstances(app.instances);
          setCommandsInfo(app.script.commands);
          setInputs([]);
          setOutputs([]);
          formRef.current.setFieldsValue({
            [`${id}action`]: '',
            [`${id}using`]: '',
          });
        }
      },
    },
    {
      name: '动作',
      formInputName: 'action',
      isSelect: true,
      options: commandsInfo ? commandsInfo.map(item => ({ id: item.name, name: item.display })) : [],
      onChange: (command) => {
        const commandInfo = commandsInfo.find(item => item.name === command);
        if (commandInfo) {
          setInputs(commandInfo.input.propertyOrder);
          setOutputs(commandInfo.output.propertyOrder);
        }
      },
    },
    {
      name: '实例',
      formInputName: 'using',
      isSelect: true,
      options: instances ? instances.map(item => ({ id: item.id, name: item.name })) : [],
    },
  ];
  const api = [
    {
      name: '节点名称',
      labelRequired: true,
      formInputName: 'name',
    },
    {
      name: '节点ID',
      labelRequired: true,
      formInputName: 'id',
    },
    {
      name: '节点描述',
      formInputName: 'description',
    },
    {
      name: 'API',
      formInputName: 'app',
      isSelect: true,
      options: [
        {
          id: 'string',
          name: 'string',
        },
      ],
    },
  ];

  const renderFooter = () => (
    <Container flex justify="flex-end" style={{ padding: '0 12px 12px 0' }}>
      <Button type="gray" style={{ marginRight: '12px' }} onClick={onClose}>取消</Button>
      <Button onClick={() => { submit({ inputs, outputs }); }}>确定</Button>
    </Container>
  );

  return (
    <div>
      <div style={{ borderBottom: '1px solid #181C25' }}>
        {type === 'app' && appAction.map(item => renderOptionInput(item, `${id}${item.formInputName}`))}
        {type === 'api' && api.map(item => renderOptionInput(item, `${id}${item.formInputName}`))}
      </div>
      <div>
        <Tabs tabBarStyle={{
          height: 34,
          fontSize: 12,
          paddingLeft: 12,
          paddingRight: 12,
        }}
        >
          <TabPane tab="输入项" key="input">
            {renderInput(inputs, id)}
          </TabPane>
          <TabPane tab="输出项" key="output">
            {renderOutput(outputs)}
          </TabPane>
          <TabPane tab="高级" key="config">
            {renderConfig(id, formRef)}
          </TabPane>
        </Tabs>
      </div>
      {renderFooter()}
    </div>
  );
};

export default AppAction;
